<template>
<!-- 这是文章列表的每一项内容的模板组件 -->
  <van-cell
    class="article-item"
    :to="`/article/${articles.art_id}`"
  >
  <!-- 标题插槽 -->
  <div slot="title" class="title van-multi-ellipsis--l2">{{articles.title}}</div>
  <!-- 左边插槽 -->
  <div slot="label">置顶
    <!-- 三张封面的是否显示 -->
    <div v-if="articles.cover.type === 3" class="cover-wrap">
      <div class="cover-item" v-for="(img, index) in articles.cover.images" :key="index">
           <van-image
           class="cover-item-img"
           fit="cover"
           :src="img"
          />
      </div>
    </div>
    <div class="labei-info-wrap">
      <span>{{articles.aut_name}}</span>
      <span>{{articles.comm_count}}</span>
      <!-- relativeTime 为全局过滤器  具体作用 在utils/dayjs.js  处理相对时间  -->
      <span>{{articles.pubdate | relativeTime }}</span>
    </div>
  </div>
  <!-- 右边图片封面插槽 -->
  <van-image
  slot="default"
  fit="cover"
  class="right-cover"
  :src="articles.cover.images[0]"
  v-if="articles.cover.type === 1"
  />
  <!-- 文中列表每项数据中的cover.type属性值有0，1，3三种植 0：该文章项没有图片封面 1：有一张封面 3就是三张封面 -->
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  props: {
    articles: { // 每一行文章列表的信息
      required: true,
      type: Object
    }
  }
}
</script>

<style scoped lang="less">
 .article-item {
   .title {
     font-size: 32px;
     color: #3a3a3a;
   }
   .van-cell__value {
     flex: unset;
     width: 232px;
     height: 146px;
     padding-left: ;
   }
   .right-cover {
      width: 232px;
     height: 146px;
   }
   .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
    .cover-wrap {
    display: flex;
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-img {
        width: 100%;
        height: 146px;
      }
    }
  }
 }
</style>
